import { SetupContext, defineComponent } from 'vue'
import { CheckboxGroupEmit, CheckboxGroupProps, checkboxGroupEmit, checkboxGroupProps } from './checkbox-group-types'
import { useNamespace } from '../shared/hooks/useNamespace'
import useCheckboxGroup from './hooks/use-checkbox-group'

export default defineComponent({
  name: 'FsCheckboxGroup',
  props: checkboxGroupProps,
  emits: checkboxGroupEmit,
  setup(props: CheckboxGroupProps, ctx: SetupContext<CheckboxGroupEmit>) {
    const { direction, disabled } = useCheckboxGroup(props, ctx)
    const ns = useNamespace('checkbox-group')
    return () => {
      return <div class={[ns.b(), ns.is('disabled', disabled.value), ns.m(direction.value)]}>{ctx.slots.default?.()}</div>
    }
  }
})
